<template>
  <div class="header">
    <h1>我是Header</h1>

    <!-- 渲染数据 -->
    <p>Count的值是{{ count }}</p>
    <p>价格是{{ price }}</p>
    
    <!-- 同步修改数据 -->
    <button @click="increament">累加</button>
    <button @click="increamentN({ n: 100 })">累加n</button>

    <!-- 异步修改数据 -->
    <button @click="waitIncreament">2秒累加</button>
    <button @click="waitIncreamentN({ n: 200 })">2秒累加n</button>

  </div>
</template>

<script>
import {mapState , mapMutations, mapActions} from "vuex"
export default {
    name: "Header",
    computed:{
      //计算属性获取数据使用mapState
      ...mapState("count" , ["count" , "price"])
    },

    methods:{
      //同步累加1不传参 mapMutations   (commit)
      ...mapMutations("count" , ["increament"]),
      //同步累加n传参   mapMutations   (commit)
      ...mapMutations("count" , ["increamentN"]),


      //异步累加1不传参 mapActions  (dispatch)
      ...mapActions("count" , ["waitIncreament"]),
      //异步累加n传参   mapActions  (dispatch)
      ...mapActions("count" , ["waitIncreamentN"]),
    }   
}
</script>

<style>
.header {
  margin: 30px;
  background: hotpink;
  text-align: center;

}
</style>